<template>
  <div class="upload">
    <div class="uploadmask bg-5d border-r boxS-i-4" :class="from&&from === 'mint'?'border-2':''">
      <img src="../../assets/icon/upload.svg"/>
    </div>
    <div class="uploadBox">
      <el-upload
        class="avatar-uploader"
        list-type="picture-card"
        action="''"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="uploadFile"
        :on-error="handleUploadError"
        :on-success=" (response, file, fileList) => {
          return handleAvatarSuccess(response, file, fileList);
        }"
        >
      </el-upload>
    </div>
  </div>
</template>
<script>
import { MessagePormpt } from '../../Js/common'
export default {
  props: ['maxsize', 'from'],
  data () {
    return {
      imageUrl: '',
      uploadUrl: process.env.BASE_URL + '/auth/upload',
      token: this.$cookies.get('token'),
      langType: localStorage.getItem('language')

    }
  },
  mounted () {
    // console.log(this.width, this.maxsize, this.uploadUrl, this.$cookies.get('token'))
  },
  methods: {
    getUploadUrl: function () {
      const uploadUrl = `${process.env.BASE_URL}/auth/upload`
      // console.log(uploadUrl)
      return uploadUrl
    },
    beforeAvatarUpload: function (file) {
      console.log(file, 'beforeAvatarUpload')
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < this.maxsize

      if (!isJPG && !isPNG && !isGIF) {
        // this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
        let langObj = {
          zh_cn: '上传头像图片只能是 JPG/PNG/GIF 格式!',
          en: 'Uploaded avatar size cannot exceed',
          ru: 'Загружать аватарки можно только JPG/PNG/GIF Формат!',
          zh_tw: '上載頭像圖片只能是 JPG/PNG/GIF 格式!'
        }
        MessagePormpt(this.langType, langObj)
      }
      if (!isLt2M) {
        // this.$message.error(`上传头像图片大小不能超过 ${this.maxsize}MB!`)
        let langObj = {
          zh_cn: `上传头像图片大小不能超过 ${this.maxsize}MB!`,
          en: `The size of the uploaded profile picture cannot exceed  ${this.maxsize}MB!`,
          ru: `Размер загружаемого аватара не может превышать ${this.maxsize}MB!`,
          zh_tw: `上載頭像大小不能超過  ${this.maxsize}MB!`
        }
        MessagePormpt(this.langType, langObj)
      }
      return (isJPG || isPNG || isGIF) && isLt2M
    },
    handleAvatarSuccess: function (res, file, fileList) {
      console.log('handleAvatarSuccess')
      console.log(res, file, fileList, 'handleAvatarSuccess')
    },
    handleUploadError: function () {
      console.log('handleUploadError')
    },
    //  覆盖默认上传行为
    uploadFile(file) {
      console.log(file, 'uploadFile')
      this.$emit('getImgUrl', file)
    },
    handleFileChange: function (params) {
      console.log(params, 'handleFileChange')
    }
  }
}
</script>
<style lang="less" scoped>
  .upload {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    .uploadmask {
      overflow: hidden;
      display: flex;
      width: 100%;
      height: auto;
      img {
        display: block;
        margin: 1% auto;
        max-width: 45%;
      }
    }
    .uploadBox {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      /deep/.el-upload {
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      .avatar-uploader {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
</style>
